Hello and welcome to this lecture in this late show.
We will be creating the presentation which is this sixth sense for our app.
Before we start to apply the here so far app Let's have a look at what it looks like out of mom.
So open up your projet.
This is my project directory and click on this index which is what we created before DoubleClick and
a tool display what the app looks like.
So this is what the app currently looks like.
There's no functionality because I've not applied the javascript yet javascript has not been implemented.
Mark this is the structure.
So once we have our pli this year says it should look a lot prettier than it is at the moment.
All right.
This this blank Seer says file.
So what I'm going to do.
I've already written out the csx for this app projet to save time so you don't have to watch me type.
I will paste the code entirely text a little and then explain the code to you.
I think that would Dowd make more sense to you.
Then you watch me type.
So I'd place a code in whole key I have now got my SS added on.
So let me run through the code with you.
So the first line one here I got the body sule would see says you can style using the tag name or hide
or class any way you see the hash tag here.
That means it's an idea.
So I'm using the idea to style that element so every C Ss malls have this format so you've got the outhaul.
This is what we are going to style which is a body were placed in between this curly braces stassi Opening
the closing an after we've done.
We've defined the style with me to end that with a SEMICON.
Alright so this is a property we want the proper to want up apply and this is of value where given that
property so we separate the property from the value using a core loan and then we ended use in a semi
colon.
So here what I'm saying here is that I want the background for the body bag runkel to be this colour
design hex decimal value X. It's called hex value.
Anyway siddhi hash with numbers like this is called hex values so you can use.
I could replace this and just type in the word great so you could use a column name if you know the
column names or even use the hex value.
If you know the hex value so that's it for the body.
However give me this colour.
Next is the input to import is the actual box.
Are people typing this here.
Is that input here.
This here.
The input.
So what.
Thats what Im styling here.
The margin from the top.
I want it to be 100 pixels.
If you look at it at the moment its is car like joined today.
So Im saying that from the top I want it to move down a certain level of pixels so I see the margin
from the top.
I want you to move a hundred pixels from the top from the left I want you to move to 20 pixels.
These values you can play around with it.
These are just my values so please feel free to experiment and change the values is really cool to do
so you can see how it works and then the wave hear how wide the box will be.
I've given it three 50 pixels all this time got to semicolon here and that would not work.
So again the height of giving their height and display.
I wanted to be in blocks.
That is the way it is going to be display as a block.
So everything in blue here.
The property is high one too.
I want to find the purple and the values for the property and needs to the property value with the colon
here.
Okay so again the same thing with the output.
This is an output.
This is where the Outerwall length of the word typed into this box will be displayed similar thing marjane
from the top.
I want it to drop down.
Forty five pixels from the top with a hundred pixels which is how wide that would be.
The background is like green marjane less from the left 400 pixels.
This is the button which is this button here.
Alright so the button that we've given in that high to give in on this is a collar which refers to the
caller on the text inside the button.
This is a background colour I've given the blue here.
I have not use HEX colours here.
I have used the actual column name and border style.
I've said none.
With the border style.
Without this there will be shadows.
You can see there will be some shadows around so the body of a star will remove the shadow on the button.
That's what that does.
Okay then we've got border radios is what will make it round it.
So the moment the button looks like a square at the border they just will make it round it makes the
edges rounded.
That's what our radio does.
And again these values play around with it.
Here's 15 pixels here.
You don't have to use 15.
Just try different values and see which one you like best.
Get inside there's a button idea here.
The margin from the top.
I wanted to drop 100 pixels margin from the left.
I wanted to move from the left.
Three hundred and eighty five pixels.
Again these values.
Play around with them.
Apply your own values and see how it looks.
So that's the end of that one.
Then this head in tag here the head front tag which is this text here.
Type a word gassy hate tag here.
So this is the stylin I have applied.
I wanted text to be centred so little text line property centred but colour.
This is a colour which is black is a hex value for black.
The margin from the top one is to move 50 pixels from the top.
So let me save that.
Save it.
Go back to the documents refresh.
This is what it looks like.
You see.
It looks much better where the stylin apply.
So in this lecture we have applied stylee hour presentation to how our app.
There is no functionality because we not applied any javascript hits.
If I type in something nothing will work.
See I see.
Type in Helo and click that nothing will happen because I have not implemented the javascript we will
be responsible for the function.
That's it for now.
Take care.
Bye for now.